<template>
	<div class="home">
		<el-container>
			<el-header style="background-color: white;height: 63px;">
				<div style=" width: 1200px;margin: 0px auto">
					<el-row :gutter="20">
						<el-col :span="6">
							<img src="/imgs/icon.png" alt="">
						</el-col>
						<el-col :span="10">
							<el-menu class="el-menu-demo" mode="horizontal" active-text-color="orange">
								<el-menu-item index="0">首页</el-menu-item>
								<el-menu-item index="1">食谱</el-menu-item>
								<el-menu-item index="2">视频</el-menu-item>
								<el-menu-item index="3">资讯</el-menu-item>
							</el-menu>
						</el-col>
						<el-col :span="6">
							<el-input placeholder="请输入搜索的关键字" style="position: relative;top:15px">
								<el-button slot="append" icon="el-icon-search"></el-button>
							</el-input>

						</el-col>
						<el-col :span="2">
							<!-- 用户未登录时 -->
							<el-popover v-if="user == null" placement="bottom-start" title="欢迎来到烘焙坊" width="200" trigger="hover">
								<i style="font-size: 30px;position: relative;top:18px" class="el-icon-user-solid"
									slot="reference"></i>
								<el-button type="info" size="small" @click="reg()">注册</el-button>
								<el-button type="primary" size="small" @click="login()">登录</el-button>
							</el-popover>
							<!-- 用户已成功登录 -->
							<el-popover v-else placement="bottom-start" title="欢迎来到烘焙坊" width="200" trigger="hover">
								<i style="font-size: 30px;position: relative;top:18px" class="el-icon-user-solid"
									slot="reference"></i>
							     <div style="text-align: center;">
									 <el-avatar src="/imgs/456.jpg"></el-avatar><br>
									 <el-button size="small" type="info" @click="personal()">个人中心</el-button>
									 <el-button size="small" type="danger" @click="logout()">退出登录</el-button>
								 </div>
							</el-popover>
							
						</el-col>
					</el-row>
				</div>

			</el-header>
			<el-main>
				<!-- 路由占位符 -->
				<router-view />
			</el-main>
			<el-footer style="background-color: black;height: 300px;padding:25px 0px;color: rgb(255,255,255);">
				<div style="width: 1200px;margin: 0px auto;">
					<el-row>
						<el-col :span="8">
							<img src="/imgs/icon.png" alt="" />
							<p>教程灵感就看烘焙坊</p>
							<p>烘焙行业网络社区平台</p>
							<p>全国百城上千个职位等你来</p>
						</el-col>
						<el-col id="footer_p" :span="8">
							<el-row>
								<el-col :span="8">
									<h3>关于我们</h3>
									<p>烘焙学院</p>
									<p>烘焙食谱</p>
									<p>分类信息</p>
									<p>求职招聘</p>
									<p>社区交流</p>
								</el-col>
								<el-col :span="8">
									<h3>服务与支持</h3>
									<p>联系我们</p>
									<p>广告投放</p>
									<p>用户协议</p>
									<p>友情链接</p>
									<p>在线反馈</p>
									<p>我发投稿</p>
								</el-col>
								<el-col :span="8">
									<h3>底部导航</h3>
									<p> Archiverp</p>
									<p>手机版</p>
									<p>小黑屋</p>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="8">
							<p style="font-size:60px;margin:0">
								<span style="color:orange">烘焙</span>坊
							</p>
							<p>烘焙行业社区平台</p>
						</el-col>
					</el-row>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	// let userinfo = localStorage.user ? JSON.parse(localStorage.user) : null
	// console.log(userinfo);
	export default {
		name: 'HomeView',
		data() {
			return {
				user:localStorage.user ? JSON.parse(localStorage.user) : null
			}
		},
		methods:{
			//注册
			 reg() {
				 //跳转都注册页面
				 this.$router.push('/reg')
				 // location.href='/reg' 导致页面刷新。比router耗费资源
			 },
			//登录
			login(){
				this.$router.push('/login')
			},
			logout(){
				if(confirm('您确定要退出登录吗？')){
					localStorage.clear() //清空
					//返回首页
					location.href="/"
				}
			},
			personal(){
				//跳转到个人中心页面
				this.$router.push('/personal')
			}
		}
		
	}
</script>
<style scoped>
	/* css */
	#footer_p p{
		margin:0
	}
</style>